<template>
  <el-aside :width="$store.state.isCollapsed?'70px' : '230px'"
            style="text-align: left!important;">
    <el-menu
        :default-active="$store.state.breadData.name"
        :collapse="$store.state.isCollapsed"
        :collapse-transition="true"
        mode="vertical" style="height: 98vh">
      <p style="text-align: center!important;height: 60px!important;cursor: pointer" v-show="!isCollapsed">
        <el-image c :class="isCollapsed?'logo-radius':'logo'" :src="require('../../assets/images/logo.png')" @click="selectMenu({name:'首页',path:'/index',label:'首页'},null)"></el-image>
      </p>
      <p v-show="isCollapsed===true">瀚海</p>
      <el-menu-item index="/index"  @click="selectMenu({name:'首页',path:'/index',label:'首页'},null)">
        <i class="el-icon-s-home"></i>
        <span slot="title" @click="selectMenu({name:'首页',path:'/index',label:'首页'},null)">首页</span>
      </el-menu-item>
      <template v-for="item in menuList">
        <!-- 判断是否只有一个节点 -->
        <el-menu-item v-if="item.menuList.length<=0" :index="'/'+item.menuCode" :key="item.id"
                      @click="selectMenu({name:item.menuName,path:'/'+item.menuCode,label:item.menuName},null)">
          <i :class="item.summary"></i>
          <span slot="title" @click="selectMenu({name:item.menuName,path:'/'+item.menuCode,label:item.menuName},null)"
                v-text="item.menuName"></span>
        </el-menu-item>
        <!-- 多个节点 -->
        <el-submenu v-else :index="'/'+item.menuCode" :key="item.id">
          <template slot="title"  @click="$store.commit('setFirstName',item.menuName)">
            <i :class="item.summary"></i> <span v-text="item.menuName" @click="$store.commit('setFirstName',item.menuName)" style="display: inline-block;width: 100%!important;"></span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="child in item.menuList" :key="child.id"
                          :index="child.menuCode==='finBaseAmountArchives'?'/'+item.menuCode +'/'+ child.menuCode+'/'+child.menuName:'/'+item.menuCode +'/'+ child.menuCode"
                          @click="child.menuCode==='finBaseAmountArchives'?selectMenu({name:child.menuName,path:'/'+item.menuCode+'/'+child.menuCode+'/'+child.menuName,label:child.menuName},item):selectMenu({name:child.menuName,path:'/'+item.menuCode+'/'+child.menuCode,label:child.menuName},item)">
              <i :class="child.summary"></i> {{ child.menuName }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </template>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "AsideComponent",
  data() {
    return {
      isCollapsed: this.$store.state.isCollapsed,
      menuList: [],
      activePath:"首页",
      allBreadData:[]
    }
  },
  created() {
    this.allBreadData=[{name: '/index',parent:'首页',child:null }]
    this.menuList=this.$store.state.menus
    console.log("MenuList:",this.menuList)
    this.menuList.forEach(item=>{
      if(item.menuList.length>0){
        item.menuList.forEach(child=>{
          if(child.menuCode==='finBaseAmountArchives'){
            this.allBreadData.push(
                {
                  name:"/"+item.menuCode+"/"+child.menuCode+"/"+child.menuName,
                  parent:item.menuName,
                  child:child.menuName
                }
            )
          }else{
            this.allBreadData.push(
                {
                  name:"/"+item.menuCode+"/"+child.menuCode,
                  parent:item.menuName,
                  child:child.menuName
                }
            )
          }

        })
      }else{
        this.allBreadData.push({
          name:"/"+item.menuCode,
          parent: item.menuName,
          child:null
        })
      }
    })
    this.$store.commit("setAllBreadData",this.allBreadData)
  },

  methods: {
    toHome(){
      this.$router.push("/index");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 点击菜单 - 传入name，添加到keepalive缓存页面
    selectMenu(item,parent) {
      // 加入keepalive缓存
      this.$store.commit('addKeepAliveCache', item.name)
      //添加tags标签
      //代表home
      var submenu = {
        path: item.path,
        name: item.name,
        label: item.label
      }
      //修改选中菜单
      this.$store.commit('selectMenu', submenu)
      // this.$router.push("/admin/" + item.path)

      console.log("ActivePath:", this.$store.state.activePath)
      // if (item.name === this.$store.state.activePath) {
      //
      // } else {
      console.log("Path:",item)
        this.$router.push(item.path)
      // }
    },
  },
  watch: {
    isCollapsed: function () {
      // this.isCollapsed=this.$store.state.isCollapsed
    },
    "$store.state.menus":{
      handler(newVal,oldVal){
        this.menuList=newVal
      }
    }
  }

}
</script>

<style scoped>
/*.el-menu-vertical-demo:not(.el-menu--collapse) {*/
/*  width: 200px;*/
/*  min-height: 400px;*/
/*}*/

.el-aside{
  overflow-x: hidden!important;
}
.el-menu-item-group__title{
  padding:0!important;
}
</style>
